<template>
	<view class="property-wrapper">
		<top-nav :border="false" :background="{
					backgroundColor:'#202020',
					borderColor:'#202020',
				}">
			<view class="top-nav-content">
				<view class="name">我的资产</view>
			</view>
		</top-nav>
		<view class="top-wrapper">
			<view class="all-count">
				<view class="rmb">¥{{priceText}}</view>
				<view class="my">(${{priceText}})</view>
			</view>
			<view class="right">
				<u-icon name="calendar-fill" color="#fff" size="28"></u-icon>
				<view class="info">February</view>
			</view>
		</view>
		<view class="curve-wrapper">
			<curve :chartData="chartData"></curve>
		</view>
		<view class="list">
			<view class="icon icon1"></view>
			<view class="info">
				<view class="name">AGT</view>
				<view class="content">{{agt}} AGT</view>
			</view>
			<view class="btn">
				<view class="send" @click="gotoPage('/pages/share/send')">发送</view>
				<view class="get" @click="gotoPage('/pages/share/get')">接收</view>
			</view>
		</view>
		<view class="list">
			<view class="icon icon2"></view>
			<view class="info">
				<view class="name">USDT</view>
				<view class="content">{{usdt}} USDT</view>
			</view>
			<view class="btn">
				<view class="send">发送</view>
				<view class="get">接收</view>
			</view>
		</view>
		<view class="detail-wrapper">
			<view class="title">账户明细</view>
			<view class="detail-content">
				<view class="detail-list" :class="item.coin_type==1?'yellow':'green'" v-for="item in detailData" :key="item.id">
					<view class="circle"></view>
					<view class="left">
						<view class="info">{{item.coin_type==1?'接收':'发送'}}</view>
						<view class="desc">sdak..sssss</view>
					</view>
					<view class="right">
						<view class="info">{{item.value}} BTC</view>
						<view class="desc">{{item.add_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<bottom-nav :currentIndex="0"></bottom-nav>
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	import curve from '../../components/curve/curve.vue';
	import bottomNav from '../../components/bottom-nav/bottom-nav.vue';
	export default{
		data(){
			return {
				priceText: '',
				agt: '',
				usdt: '',
				chartData:{
					x:[],
					y:[]
				},
				detailData:[]
			}
		},
		components:{
			'topNav':topNav,
			curve:curve,
			bottomNav:bottomNav
		},
		mounted() {
			this.$u.post('/api/myAssets', {account_id:uni.getStorageSync('account_id')}).then(res=>{
				if(res.code==200){
					this.priceText = this.fmoney(res.data.assets);
					this.agt = this.fmoney(res.data.agt);
					this.usdt = this.fmoney(res.data.usdt)
					this.chartData = {
						x:res.data.chart.X,
						y:res.data.chart.Y
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					})
				}
			})
			// 账户明细
			this.$u.post('/api/getAccountDetails', {account_id:uni.getStorageSync('account_id')}).then(res=>{
				if(res.code==200){
					this.detailData = res.data;
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					})
				}
			})
		},
		methods:{
			gotoPage(path){
				uni.navigateTo({
				    url: path
				});
			},
			fmoney(s, n) {
				 n = n > 0 && n <= 20 ? n : 2;  
				   s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";  
				   var l = s.split(".")[0].split("").reverse(),  
				   r = s.split(".")[1],
				   t = "";  
				   for(var i = 0; i < l.length; i ++ )  
				   {  
				      t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");  
				   }  
				return t.split("").reverse().join("") + "." + r;  
			}
		}
	}
</script>

<style lang="scss" scoped>
	.property-wrapper{
		.top-nav-content{
			padding:20*2rpx;
			.name{
				font-size:24*2rpx;
			}
		}
		.top-wrapper{
			display: flex;
			align-items: flex-end;
			padding:0 20*2rpx;
			margin-top:16*2rpx;
			.all-count{
				flex:1;
				.rmb{
					font-size: 48*2rpx;
					display: inline-block;
				}
				.my{
					font-size:12*2rpx;
					display: inline-block;
					opacity: 0.6;
					margin-left:20rpx;
				}
			}
			.right{
				display: flex;
				margin-bottom:10rpx;
				.info{
					margin-left:20rpx;
				}
			}
		}
		.curve-wrapper{
			margin: 40*2rpx auto;
		}
		.list{
			margin: 0 16rpx 20*2rpx;
			background: #69DA73;
			box-shadow: 0px 15*2rpx 40*2rpx 0px rgba(117, 117, 170, 0.08);
			border-radius: 3*2rpx;
			display:flex;
			align-items: center;
			padding:0 30rpx;
			height:160rpx;
			.icon{
				width:34*2rpx;
				height:34*2rpx;
				margin-right:30rpx;
				border-radius: 50%;
				background-size: 100% 100%;
				&.icon1{
					background-image: url('/static/property/icon1.png');
				}
				&.icon2{
					background-image: url('/static/property/icon1.png');
				}
			}
			.info{
				flex:1;
				.name{
					font-size:14*2rpx;
					color:#000;
				}
				.content{
					font-size:16*2rpx;
					color:#fff;
					margin-top:10rpx;
				}
			}
			.btn{
				display: flex;
				font-size:14*2rpx;
				.send{
					width: 60*2rpx;
					height: 26*2rpx;
					background: #FFB721;
					border-radius: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right:34rpx;
				}
				.get{
					width: 60*2rpx;
					height: 26*2rpx;
					background: #122614;
					border-radius: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.detail-wrapper{
			padding:0 20*2rpx;
			.title{
				font-size: 24*2rpx;
				margin-top:50*2rpx;
			}
			.detail-content{
				border-left: 1px solid #fff;
				margin:25*2rpx 0 130rpx;
				padding-bottom:248*2rpx;
				.detail-list{
					display:flex;
					align-items: center;
					position:relative;
					padding-left:48rpx;
					margin-bottom:30rpx;
					.left{
						flex:1;
					}
					.right{
						text-align: right;
					}
					.info{
						font-size:14*2rpx;
						margin-bottom:10rpx;
					}
					.desc{
						font-size:10*2rpx;
						color:#8D8D8D;
					}
					.circle{
						position:absolute;
						width: 16*2rpx;
						height: 16*2rpx;
						border-radius: 50%;
						left:-16rpx;
						top:0;
					}
					&.green{
						.circle{
							background: #FFFFFF;
							border: 1px solid #69DA73;
							padding:2px;
							&:after{
								content:'';
								display: block;
								width:100%;
								height:100%;
								border-radius:50%;
								background-color: #69DA73;
							}
						}
						.left{
							.info{
								color:#69DA73;
							}
						}
						.right{
							.info{
								color:#FFB721;
							}
						}
					}
					&.yellow{
						.circle{
							background: #FFFFFF;
							border: 1px solid #FFB721;
							padding:2px;
							&:after{
								content:'';
								display: block;
								width:100%;
								height:100%;
								border-radius:50%;
								background-color: #FFB721;
							}
						}
						.left{
							.info{
								color:#FFB721;
							}
						}
						.right{
							.info{
								color:#69DA73;
							}
						}
					}
				}
			}
		}
	}
</style>
